<!--房源素材 所有类型素材-->
<template>
  <div class="wrap">
    <com-upload-video @onsuccess="onSuccess" @ondelete="onDelete" :hmDelSummaryInfo="hmDelSummaryInfo" :room="houDelVO.room" :houDelId="houDelId">
      <template #default="{ loading, loadText, houseImages, handleUploadVideo, handleDeleteVideo, handleVrToVideo }">
        <div
          v-loading.fullscreen="loading"
          :element-loading-text="loadText"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <template v-if="houseImages[0] && houseImages[0].playUrl">
            <div class="d-flex fd-column">
              <video style="width: 800px; margin: auto" :src="houseImages[0].playUrl" controls="controls">
                您的浏览器不支持视频播放器
              </video>

              <el-button style="width: 150px; margin: 5px auto" size="small" type="warning" @click="handleDeleteVideo"
                >删除视频</el-button
              >
            </div>
          </template>
          <template v-else>
            <el-empty>
              <template #description>
                <p style="color: black; line-height: 2; font-size: 16px">您的房源还未录制视频~</p>
                <p>（可上传房源视频或使用图片合成视频进行合成）</p>
              </template>
              <el-button size="small" type="primary" round @click="handleUploadVideo">点我上传视频</el-button>
              <el-button size="small" type="primary" plain round @click="handleVrToVideo">点我合成视频</el-button>
            </el-empty>
          </template>
        </div>
      </template>
    </com-upload-video>
  </div>
</template>
<script>
import ComUploadVideo from '@/views/house/com/com-upload-video.vue';
import { mapActions, mapGetters, mapState } from 'vuex';
export default {
  name: 'TabVideo',
  shulan: true,
  components: {
    ComUploadVideo,
  },
  props: {},
  data() {
    return {};
  },
  created() {},
  mounted() {},
  watch: {},
  computed: {
    ...mapState({
      info: (state) => state.houseInfo,
      hmDelSummaryInfo: (state) => state.houseInfo.hmDelSummaryInfo,
      houDelVO: (state) => state.houseInfo.houDelVO,
    }),
    ...mapGetters({
      houDelId: 'houseInfo/houDelId',
    }),
  },
  methods: {
    ...mapActions({
      updateInfoById: 'houseInfo/updateInfoById',
    }),

    onSuccess() {
      this.$emit('updateTabNames', this.$options.name, 1)
    },

    onDelete() {
      this.$emit('updateTabNames', this.$options.name, 0)
    }
  },
};
</script>
<style lang="scss" scoped>
@import '~@/styles/mixin.scss';

.wrap {
  height: 500px;
  overflow: auto;
  padding-right: 10px;
  @include scrollBar;
}
</style>
